<template>
	<view style="margin: 5rpx;">
		<view><text></text></view>
		<view v-for="(item, index) in datalist" :key="index" style="margin: 3rpx;">
			<NewsView 
				:title="item.title" 
				:isTop="item.isTop" 
				:author="item.author" 
				:count="item.comments"
				:date="item.time"
				:imageUrl="item.imageUrl" 
				:mode="item.mode"
				:images="item.images">
				<template v-slot:tips>
					<view class="slotcontent" v-if="item.showSearch">
						<text>搜索:</text>
						<view class="borderbox"><text>今日金价</text></view>
						<view class="borderbox"><text>精选好物</text></view>
					</view>
				</template>
			</NewsView>
		</view>
	</view>
</template>

<script>
	import newsData from '@/Data/news.json'
	import NewsView from "../../../components/NewsView.vue"
	
	export default {
		components: {
			NewsView
		},
		data() {
			return {
				datalist: []
			};
		},
		onLoad() {
			this.datalist = newsData;
			console.log("JSON数据导入结果：", this.datalist);
		}
	};
</script>

<style>
	.slotcontent {
		display: flex;
		align-items: center;
		margin: 15rpx 20rpx 0;
		font-size: 24rpx; 
		color: plum;
	}
	.borderbox {
		border: 3rpx solid #666; 
		border-radius: 15rpx;
		padding: 5rpx 18rpx;
		margin-left: 12rpx;
	}
</style>